<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, computed } from "vue";
import { allList } from "@/utils/hotList";

const nowValue = ref({});
const currentIndex = ref(0);

onLoad((option) => {
  console.log(option.id);
  const item = allList.filter((ev) => ev.id == option.id)[0];
  nowValue.value = item;
  currentIndex.value = allList.findIndex((ev) => ev.id == option.id);
});

// 上一题
const prevQuestion = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
    nowValue.value = allList[currentIndex.value];
    // 可以在这里添加页面滚动到顶部的逻辑
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 300,
    });
  } else {
    uni.showToast({
      title: "已经是第一题了",
      icon: "none",
    });
  }
};

// 下一题
const nextQuestion = () => {
  if (currentIndex.value < allList.length - 1) {
    currentIndex.value++;
    nowValue.value = allList[currentIndex.value];
    // 可以在这里添加页面滚动到顶部的逻辑
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 300,
    });
  } else {
    uni.showToast({
      title: "已经是最后一题了",
      icon: "none",
    });
  }
};

// 计算进度
const progress = computed(() => {
  if (allList.length === 0) return 0;
  return Math.round(((currentIndex.value + 1) / allList.length) * 100);
});
</script>

<template>
  <view class="home">
    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
      <block slot="content">面试题详情页</block>
    </cu-custom>

    <!-- 进度条 -->
    <view class="progress-container">
      <view class="progress-text"
        >{{ currentIndex + 1 }} / {{ allList.length }}</view
      >
      <view class="progress-bar-bg">
        <view class="progress-bar" :style="{ width: progress + '%' }"></view>
      </view>
    </view>

    <!-- 题目内容 -->
    <view class="question-container">
      <view class="question-title">
        <text class="title-number">Q{{ currentIndex + 1 }}:</text>
        <text class="title-text">{{ nowValue.title }}</text>
      </view>

      <view class="question-content">
        <rich-text :nodes="nowValue.content"></rich-text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="button-container">
      <button class="nav-button prev-button" @click="prevQuestion">
        <text class="iconfont icon-arrow-left"></text>
        <text>上一题</text>
      </button>

      <button class="nav-button next-button" @click="nextQuestion">
        <text>下一题</text>
        <text class="iconfont icon-arrow-right"></text>
      </button>
    </view>
  </view>
</template>

<style scoped lang="scss">
.home {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.progress-container {
  padding: 20rpx 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;

  .progress-text {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 10rpx;
  }

  .progress-bar-bg {
    height: 12rpx;
    background-color: #e0e0e0;
    border-radius: 6rpx;
    overflow: hidden;

    .progress-bar {
      height: 100%;
      background: linear-gradient(90deg, #0081ff, #1cbbb4);
      border-radius: 6rpx;
      transition: width 0.3s ease;
    }
  }
}

.question-container {
  background-color: #fff;
  margin: 0 20rpx 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

  .question-title {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #eee;

    .title-number {
      font-weight: bold;
      color: #0081ff;
      font-size: 32rpx;
      margin-right: 15rpx;
      flex-shrink: 0;
    }

    .title-text {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      line-height: 1.5;
    }
  }

  .question-content {
    font-size: 28rpx;
    line-height: 1.8;
    color: #555;

    ::v-deep rich-text {
      display: block;

      p {
        margin-bottom: 20rpx;
      }

      code {
        background-color: #f0f0f0;
        padding: 4rpx 10rpx;
        border-radius: 6rpx;
        font-family: monospace;
      }

      pre {
        background-color: #f8f8f8;
        padding: 20rpx;
        border-radius: 10rpx;
        overflow: auto;
        margin: 20rpx 0;

        code {
          background: none;
          padding: 0;
        }
      }
    }
  }
}

.button-container {
  display: flex;
  justify-content: space-between;
  padding: 0 10rpx;
  margin-top: 30rpx;

  .nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45%;
    padding: 10rpx 0;
    border-radius: 40rpx;
    font-size: 30rpx;
    border: none;
    transition: all 0.3s;

    &.prev-button {
      background: linear-gradient(90deg, #ffffff, #f0f0f0);
      color: #333;
      border: 1rpx solid #ddd;

      &:active {
        background: linear-gradient(90deg, #f0f0f0, #e0e0e0);
      }
    }

    &.next-button {
      background: linear-gradient(90deg, #0081ff, #1cbbb4);
      color: #fff;

      &:active {
        background: linear-gradient(90deg, #0070e0, #17a090);
      }
    }

    .iconfont {
      margin: 0 10rpx;
      font-size: 32rpx;
    }
  }
}
</style>
